<!-- if($system['h5work'] =='1'){
    $return_clicent = get_defined_vars();
return view('/fcworker/x_complain' );
}else{
    $return_clicent = get_defined_vars();
return view('/fcworker/x_complain' );
} -->
{if !empty($result)}
{if $system['h5work'] == '1'} 
    {include file='fcworker/fc_head'}
{else}
<link rel="stylesheet" href="{$_G['URL']['FCWORK_CSS']}css/style.css?v=11">
<link rel="stylesheet" href="{$_G['URL']['LAYER_CSS']}/layui.css">
<script src="{$_G['URL']['LAYER_CSS']}/layui.js"></script>
    {include file='yxworker/w_head'}
{/if}

<div id="mescroll" class="mescroll">
    <div id="app">
        {if $result[list]|| $result['status_list']}
        {if $system['h5work'] == '1'}
        {include file='fcworker/fc_headsearch'}
        {else}
        {include file='yxworker/w_headsearch'}
        {/if}

        <style>
            .container {
                padding-top: 1.15rem;
            }
            .peopleTime {
                position:relative;
                padding-left: .30rem;
                border-bottom: .03rem solid #f8f8f8;
                line-height: .58rem;
                color: #9b9b9b;
                font-size: .24rem;
                margin: 0;
            }
            .peopleTime .hexiao_tips{
                font-weight: bold;
                color: #fb78b4;
                font-size: .15rem;
                margin-right: .17rem;
                position: absolute;
                right: 0;
                top: 0;
            }
            .peopleTxt div.worker {
                color: #949494;
                font-size: .28rem;
                line-height: .4rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }
            .peopleTxt div.worker p {
                display: inline;
            }
            .detail-container {
                padding: .15rem .40rem .15rem .40rem;
                position: relative;
            }

            .detail-container::before {
                content: ' ';
                position: absolute;
                top: -50%;
                left: -50%;
                bottom: -50%;
                right: -50%;
                border: 0 solid #ebedf0;
                box-sizing: border-box;
                transform: scale(.5);
                transform-origin: center;
                border-top-width: 1px;
                pointer-events: none;
            }

            .detail-container::after {
                content: ' ';
                position: absolute;
                top: -50%;
                left: -50%;
                bottom: -50%;
                right: -50%;
                border: 0 solid #ebedf0;
                box-sizing: border-box;
                transform: scale(.5);
                transform-origin: center;
                border-bottom-width: 1px;
                pointer-events: none;
            }

            .detail-container .detail-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #7a7878;
                font-size: .24rem;
                margin-top: .10rem;
            }
            .detail-container > .detail-item:nth-child(1){
                margin-top: 0;
            }

            .detail-container .detail-item .item-label{
                width: 2.00rem;
            }
            .detail-container .detail-item .item-content {
                width: 5.50rem;
                text-align: right;
            }
            .peoPle .handle{
                padding: .10rem;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
            .peoPle .handle .handle-btn {
                margin-right: .15rem;
                border: 1px solid rgb(230, 227, 227);
                padding: .08rem .10rem;
                border-radius: .40rem;
                color: #7a7878;
                font-size: .30rem;
                min-width: 1.20rem;
                text-align: center;
            }
            .peoPle .handle .handle-btn.refund{
                color: lightcoral;
                border-color: lightcoral;
            }
            .show-more {
                display: flex;
                justify-content: start;
                align-items: center;
                flex: 1;
                padding-left: .20rem;
            }
            .show-more div {
                color: #7a7878;
                font-size: .26rem;
            }
            .show-more img{
                width: 1em;
                /* height: 1em; */
                /* margin-left: .5rem; */
                vertical-align: middle;
                transform: rotate(0deg);
                transition: all .2s linear;
            }
            .show-more img.rotate{
                transform: rotate(180deg);
            }
            .nodata {
                padding: 50rpx;
                line-height: 40rpx;
                text-align: center;
                display:block;
                font-size:26rpx;
                color:#ccc;
            }
            .peopleTime .hexiao_tips{
                font-weight: bold;
                color: #fb78b4;
                font-size: 15px;
                margin-right: 17rpx;
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
        <div class="container">
            <div class="numPeople">
                <ul>
                    {loop $result['status_list'] $index $item}
                    <a href="javascript:void(0);" data-status="{$item['status']}" class="checkBtn1">
                        <li style="width: 25%;">
                            <p>{$item['title']}</p>
                            <span>{$item[total]}</span>
                        </li>
                    </a>
                    {/loop}
                </ul>
            </div>
        </div>
        <div id="append_list">
            {if count($result['list']) <=0 }
            <div class="nodata">
                <div>没有更多数据</div>
            </div>
            {/if}
            {loop $result['list'] $index $item}
            <div class="peoPle">
                <div class="peopleTime">
                    <div>ID:{php echo substr($item['software'],2);}{$item['id']}</div>
                    {if $item['status'] == 3}
                    <div class="hexiao_tips" style="position: absolute; right: 0; top:0;color: #9f9f9f">已完结</div>
                    {else}
                    <div class="hexiao_tips" style="position: absolute; right: 0; top:0;">{php echo $item['status'] == 1 ? '未处理' : 处理中;}</div>
                    {/if}
                </div>
                <div class="peopleInfor">
                    <div class="peopleImg">
                        <img src="{$item['avatar']}" alt="">
                    </div>
                    <div class="peopleTxt">
                        <h2>{php echo $item['order_username'] ;}</h2>
                        <p>昵称:{php echo $item['nickname'] ;}</p>
                        <p>电话:{php echo $item['order_mobile'] ;}</p>
                        {if $item['workername'] || $item['teamname']}
                        <div class="worker">
                            所属员工:{if $item['workername']}<p>{$item['workername']}|</p>{/if}{if $item['teamname']}<p>{$item['teamname']}</p>{/if}
                        </div>
                        {/if}
                    </div>
                    <a href="tel:{$item['order_mobile']}" class="telBtn"></a>
                </div>
                <div class="detail-container">
                    <div class="detail-item">
                        <div class="item-label">投诉原因</div>
                        <div class="item-content">{$item['type']}</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">投诉内容</div>
                        <div class="item-content">{$item['content']}</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">投诉时间</div>
                        <div class="item-content">{$item['created_at']}</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">订单状态</div>
                        <div class="item-content">{php echo $item['paystatus'] == 1 ? '已支付' : '未支付';}</div>
                    </div>
                    <div class="items-more" style="display: none;">
                        <div class="detail-item">
                            <div class="item-label">订单编号</div>
                            <div class="item-content">{$item['order_id']}</div>
                        </div>
                        <div class="detail-item">
                            <div class="item-label">订单金额</div>
                            <div class="item-content">{$item['order_fee']}</div>
                        </div>
                        {if $item['paystatus'] == 1}
                        <div class="detail-item">
                            <div class="item-label">付款时间</div>
                            <div class="item-content">{$item['paytime']}</div>
                        </div>
                        {/if}
                    </div>
                </div>
                <div class="handle">
                    <div class="show-more">
                        <div><span>查看更多</span><img src="{$_G['URL']['FCWORK_CSS']}images/downbg.png"></img></div>
                    </div>
                    {if $item['order_id']}
                    <div class="handle-btn commu-detail check-order" data-id="{$item['order_id']}" data-mobile="{$item['order_mobile']}" style="padding: .08rem .30rem;">查看订单</div>
                    {/if}
                    <div class="handle-btn commu-detail check-detail" data-id="{$item['id']}">{php echo $item['status'] == 3 ? '详情' : '处理';}</div>
                    {if $item['status'] != 3 && $item['type'] == '申请退款' && $item['paystatus'] == 1}
                    <div class="handle-btn refund" data-id="{$item['id']}" data-orderid="{$item['order_id']}">退款</div>
                    {/if}
                </div>
            </div>
            {/loop}
        </div>
        <script>
            // 查看更多
            $('.show-more').each(function() {
                let showMore = new ShowMore(this);
                showMore.handle();
            })
            function ShowMore(element) {
                this.open = false;
                this.handle = () => {
                    $(element).bind('click', () => {
                        if(!this.open) {
                            $(element).find('span').text('收起');
                            $(element).find('img').addClass('rotate');
                            $(element).parents('.handle').prev('.detail-container').find('.items-more').show();
                        } else {
                            $(element).find('span').text('查看更多');
                            $(element).find('img').removeClass('rotate');
                            $(element).parents('.handle').prev('.detail-container').find('.items-more').hide();
                        }
                        this.open = !this.open;
                    })
                }
            }
            $('.checkBtn1').click(function() {
                const status = this.dataset.status;
                const url = '{php echo "/".createMobileUrl("w_complain",array("themeid"=>$themeid));}'+'&status='+status;
                window.location.href = url;
            })
            $('.handle-btn.refund').click(function() {
                const dataSet = this.dataset;
                layer.confirm('确定要退款吗?',{
                    title: '提示',
                },function(index) {
                    const loading = layer.load(1);
                    const url = '{php echo "/".createMobileUrl("w_complain",array("themeid"=>$themeid));}';
                    $.ajax({
                        url,
                        method: 'POST',
                        dataType: 'json',
                        data: {
                            id: dataSet.orderid,
                            complainID: dataSet.id,
                            op: 'refund'
                        },
                        success(res) {
                            layer.close(loading);
                            if(res.type == 'info') {
                                layer.msg(res.message);
                            } else if (res.type == 'ajax') {
                                const dataInfo = res.message;
                                layer.alert(dataInfo.msg, function(index) {
                                    layer.close(index);
                                    window.location.reload();
                                })
                            }
                        },
                        fail(err) {
                            console.log(err);
                            layer.close(loading);
                        }
                    })
                    layer.close(index);
                }, function(index) {
                    layer.close(index)
                })
            })
            $('.handle-btn.check-order').click(function() {
                const id = this.dataset.id;
                const url = '{php echo "/".createMobileUrl($system["h5work"] == "1"? "X_order" : "w_order",array("themeid"=>$themeid));}'+'&id='+id;
                window.location.href = url;
            })
            $('.handle-btn.commu-detail.check-detail').click(function() {
                const id = this.dataset.id;
                const url = '{php echo "/".createMobileUrl("w_complain",array("themeid"=>$themeid,"op" => "reply",));}'+'&id='+id;
                window.location.href = url;
            })
        </script>
        {else}
        <style>
            body{
                min-height: 100vh;
            }
            .complain-detail{
                position: relative;
                overflow: auto;
                padding-bottom: 1.90rem;
                box-sizing: border-box;
                padding-top: 1.60rem;
                background-color: #fff;
                width: 100%;
                box-sizing: border-box;
            }
            .metro_container.content {
                display: none;
            }
            .h110 {
                display: none;
            }
            .user_info {
                padding: .16rem .32rem .08rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                position: fixed;
                width: 100%;
                top: 0;
                left: 0;
                background: #fff;
                box-shadow: 0 .05rem .10rem #e5e5e5;
                z-index: 10;
            }
            .user_info .user_avatar img {
                width: 1.04rem;
                height: 1.04rem;
            }
            .user_info .user_detail {
                flex: 1;
                margin-left: .24rem;
            }
            .user_info .user_detail span {
                display: block;
                color: #949494;
                font-size: .28rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .user_info .user_detail text:nth-child(1){
                font-size: .34rem;
                color: #1c1c1c;
                line-height: .48rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .user_info .user_mobile image {
                width: .54rem;
                height: .54rem;
            }
            /* sreps */
            .step-hairline{
                position: relative;
            }
            .step-hairline::after {
                border:0 solid #ebedf0;
                bottom:-50%;
                box-sizing:border-box;
                content:" ";
                left:-50%;
                pointer-events:none;
                position:absolute;
                right:-50%;
                top:-50%;
                transform:scale(.5);
                transform-origin:center
            }

            .steps {
                background-color: #fff;
                overflow: hidden;
            }
            .steps--vertical{
                padding-left: 10px;
            }
            .steps--vertical .step__wrapper {
                padding: 0 0 0 20px;
            }
            .step {
                color: #969799;
                flex: 1;
                font-size: 14px;
                position: relative;
            }
            .step--finish{
                color: #323233;
            }
            .step__circle{
                background-color: #969799;
                border-radius: 50%;
                height: 6px;
                width: 6px;
            }
            .step--vertical{
                line-height: 18px;
                padding: 10px 10px 10px 0;
            }
            .step--vertical::after{
                border-bottom-width: 1px;
            }
            .step--vertical:last-child::after{
                border-bottom-width: 0;
            }
            .step--vertical:first-child::before{
                background-color: #fff;
                content: "";
                height: 20px;
                left: -15px;
                position: absolute;
                top: 0;
                width: 1px;
                z-index: 1;
            }
            .step--vertical .step__circle,.step--vertical .step__icon,.step--vertical .step__line{
                left: -14px;
                position: absolute;
                top: 19px;
                transform: translate3d(-50%, -50%, 0);
                z-index: 2;
            }
            .step--vertical .step__title .content{
                word-break: break-all;
            }
            .step--vertical .step__icon {
                font-size: 12px;
                line-height: 1;
            }
            .step--vertical .step__line {
                background-color: #ebedf0;
                height: 100%;
                transform: translate3d(-50%,0,0);
                width: 1px;
                z-index: 1;
            }
            .complain_handle {
                display: flex;
                justify-content: center;
                overflow: hidden;
                position: fixed;
                left: 0;
            {php echo $system['h5work'] == '1' ? 'bottom: 1.00rem;' : 'bottom: 1.08rem;';}
            width: 100%;
            padding-bottom:.5rem;
            background-color: #fff;
            z-index: 2;
            }
            .complain_handle .handle-btn {
                margin: 0 .40rem;
            }
            .handle-btn {
                display: block;
                width: 184px;
                margin-left: auto;
                margin-right: auto;
                padding: 8px 10px;
                box-sizing: border-box;
                font-weight: 700;
                font-size: .28rem;
                text-align: center;
                text-decoration: none;
                color: #fff;
                line-height: 1.6;
                border-radius: 8px;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                border: none;
            }
            .handle-btn__primary {
                background-color: #07c160;
            }
            .handle-btn__warn {
                background-color: #fa5151;
            }
            .reply{
                position: fixed;
                /* bottom: 15rpx; */
                width: 100%;
                padding: .15rem .25rem;
                background-color: #e5e5e5;
                box-sizing: border-box;
                z-index: 2;
                transition: bottom 0.20s linear;
                padding-right: 1.00rem;
                z-index: 1001;
                box-sizing: border-box;
            }
            .reply input {
                width: 100%;
                background-color: #fff;
                border-radius: .15rem;
                height: .68rem;
                border: none;
            }
            .reply button {
                margin: 0;
                padding: 0;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                background: inherit;
                width: 1.00rem !important;
                background-color: #e5e5e5;
                line-height: 1.00rem;
                color: blue;
                border: none;
                font-size: .28rem;
            }
            .footer{
                z-index: 3;
            }
            .complain-detail__back {
                position: fixed;
                right: 20rpx;
                right: .5rem;
                z-index: 100;
                bottom: 3rem;
                background: #07c160;
                width: .8rem;
                height: .8rem;
                border-radius: 50%;
                text-align: center;
                line-height: .8rem;
                color: #fff;
            }
        </style>
        <!-- <div class="show-keyboard" style="display: none;"></div> -->
        <div class="complain-detail">
            <div class="user_info">
                <div class="user_avatar">
                    <img src="{$result['avatar']}"></img>
                </div>
                <div class="user_detail">
                    <span>{$result['order_username']}</span>
                    <span>昵称:{$result['nickname']}</span>
                    <span>电话:{$result['order_mobile']}</span>
                </div>
                <div class="user_mobile">
                    <a href="tel:{$result['order_mobile']}" class="telBtn"></a>
                </div>
            </div>
            <div class="steps steps--vertical">
                <div class="step__wrapper">
                    {loop $result['reply_info'] $index $item}
                    <div class="step step--vertical step-finish step-hairline" style="{php echo $index<count($result['reply_info']) ? 'color: #969799;' : '';}">
                        <div class="step__title" style="{php echo $index==0 ? 'color: #07c160': '';}">
                            <div>{$item['type']}</div>
                            <div class="content">{$item['reply']}</div>
                            <div>{$item['time']} 操作:{$item['opuser']}</div>
                        </div>
                        <div class="step__circle-container">

                            <div style="{php echo $index > 0 ? '' : 'background-color:#07c160;';}" class="step__circle"></div>
                        </div>
                        <div style="background-color:{php echo $index == 0 ? '#07c160' : '#969799';}" class="step__line"></div>
                    </div>
                    {/loop}
                    <div class="step step--vertical step-finish step-hairline" style="{php echo count($result['reply_info']) == 0 ? 'color: #969799;' : '';}">
                        <div class="step__title" style="{php echo count($result['reply_info'])== 0 ? 'color: #07c160': '';}">
                            <div>用户发起投诉</div>
                            <div class="content">{$result['content']}</div>
                            <div>{$result['created_at']}</div>
                        </div>
                        <div class="step__circle-container">
                            <div style="{php echo count($result['reply_info']) > 0 ? '' : 'background-color:#07c160;';}" class="step__circle"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <span class="aaa">1</span> -->
            {if $result['status'] && $result['status'] != 3 }
            <div class="complain_handle">
                <button class="handle-btn handle-btn__primary handle_reply">回复</button>
                {if $result['type'] == '申请退款' && $result['paystatus'] == 1}
                <button class="handle-btn handle-btn__warn handle_refund" data-id="{$result['order_id']}" data-complainid="{$result['id']}">退款</button>
                {/if}
            </div>
            {/if}

        </div>
        <div class="reply" style="bottom:0; display: none;" >
            <form class="reply_info">
                <input type="text" hidden name="id" value="{$result['id']}">
                <input class="reply_txt" enterkeyhint="send" focus="focus" name="reply_txt" type="text" />
                <button type="submit">发送</button>
            </form>
        </div>
        <div class="complain-detail__back">
            返回
        </div>
        <script>
            // window.onscroll = function() {
            //     let timer;
            //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //     $('.aaa').text(scrollTop);
            // }
            $('button.handle_reply').click(function() {

                $('div.reply').show();
                $('div.reply input').focus();
                $(this).parent().css('bottom', '-0.5rem');


            })
            $('button.handle_refund').click(function() {
                const dataSet = this.dataset;
                layer.confirm('您确定要退款吗?',
                    { title: '提示' },
                    function(index) {
                        layer.close(index);
                        const loading = layer.load(1);
                        const url = '{php echo "/".createMobileUrl("w_complain",array("themeid"=>$themeid));}';
                        $.ajax({
                            url,
                            method: 'POST',
                            dataType: 'json',
                            data: {
                                op: 'refund',
                                id: dataSet.complainid,
                                complainID: dataSet.id
                            },
                            success(res) {
                                layer.close(loading)
                                if(res.type == 'info') {
                                    layer.msg(res.message);
                                } else if (res.type == 'ajax') {
                                    const dataInfo = res.message;
                                    layer.alert(dataInfo.msg, function(index) {
                                        layer.close(index);
                                        window.location.reload();
                                    })
                                }

                            },
                            fail(err) {
                                layer.close(loading);
                                console.log(err);
                            }
                        })
                    },function(index) {
                        layer.close(index);
                    })
            })
            $('input.reply_txt').blur(function(){
                setTimeout(() => {
                    $(this).val('');
                    $('div.reply').hide();
                    $('.complain_handle').css('bottom','1rem');
                    let u = navigator.userAgent;
                    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                    if(isiOS) {
                        $('.user_info').css('position', 'fixed');
                        $('.complain-detail').css('height', `unset`).css('top', 0);
                        // $('.reply').css('position','fixed');
                        keyboardHeight = 0;
                    }
                    $('.complain-detail__back').show();
                },100)
            })
            let keyboardHeight = 0,screenHeight = window.innerHeight;
            let timer = {
                id:null,
                run:function (callback,time) {
                    this.id = window.setInterval(callback,time);
                },
                clean:function () {
                    var that = this;
                    this.id = window.clearInterval(that.id);
                }
            }
            $('input.reply_txt').focus(function() {
                if(!keyboardHeight){
                    timer.run(function () {
                        if (screenHeight !== window.innerHeight) {
                            keyboardHeight = screenHeight-window.innerHeight;
                            let u = navigator.userAgent;
                            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                            if(isiOS) {
                                $('.user_info').css('position', 'absolute');
                                $('html').css('height',`${keyboardHeight}px`);
                                $('.complain-detail').css('height', `${keyboardHeight}px`).css('top',`${keyboardHeight}px`);
                            }
                            timer.clean()
                        }
                    }, 50)
                }
                $('.complain-detail__back').hide();
            })
            $('form.reply_info').submit(function(e) {
                e.preventDefault();
                const dataSet = this.dataset;
                const data = serializeObject($(this).serializeArray());
                console.log(data);
                $('input.reply_txt').blur();

                const url = '{php echo "/".createMobileUrl("w_complain",array("themeid"=>$themeid));}';
                $.ajax({
                    url,
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        save:true,
                        op: 'reply',
                        ...data
                    },
                    success(res) {
                        if(res.type == 'info') {
                            layer.msg(res.message);
                        } else if (res.type == 'ajax') {
                            const dataInfo = res.message;
                            layer.alert(dataInfo.msg, function(index) {
                                layer.close(index);
                                // $('html,body').scrollTop(0);
                                window.location.reload(true);
                            })
                        }
                    },
                    fail(err) {
                        console.log(err);
                    }
                })
                // 提交
            })
            setTimeout(function() {
                $('body').scrollTop() !== 0 ? $('body').scrollTop(0): null;
            },100)
            function serializeObject(array) {
                var result = {};
                var extend = function(i, element) {
                    var node = result[element.name];
                    if ('undefined' !== typeof node && node !== null) {
                        if ($.isArray(node)) {
                            node.push(element.value);
                        } else {
                            result[element.name] = [node, element.value];
                        }
                    } else {
                        result[element.name] = element.value;
                    }
                }
                $.each(array, extend);
                return result;
            }
            $('.complain-detail__back').click(function() {
                window.history.back();
            })
        </script>
        {/if}
        {if $system['h5work'] == '1'}
        {include file='fcworker/fc_foot_yixuan'}
        <div class="h110"></div>
        {include file='fcworker/fc_foot'}
        {else}
        {include file='yxworker/w_foot'}
        {/if}
    </div>
</div>
<script>
    const mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            callback: () => {
                mescroll.endSuccess();
                setTimeout(() => {
                    window.location.reload();
                },500)
            }
        },
        up: {
            use: false
        }
    })
</script>
{/if}




